// Select the node that will be observed for mutations
let targetNode = document.getElementById('btnCls');
// Options for the observer (which mutations to observe)
let config = { characterData:true, attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
let callback = function(mutationsList, observer) {
    mutationsList.map(function (m) {
        console.log('Mutation Type:' + m.type);
        console.log('Mutation Target:' + m.target);
        console.log('Mutation Target Text:' + m.target.textContent);
    });


    // for(let mutation of mutationsList) {
    //    if (mutation.type == 'characterData') {
    //         console.log('The ' + mutation.characterData + ' attribute was modified.');
    //    }
    //    console.log(`mutation.type = ${mutation.type}`);
    // }
};


// Create an observer instance linked to the callback function
let observer = new MutationObserver(callback);

/*let observer = new MutationObserver( (mutations) => {
    mutations.forEach( (mutation) => {
        console.log(`mutation.type = ${mutation.type}`);

        for (let i = 0; i < mutation.addedNodes.length; i++) {
            console.log(`${mutation.addedNodes[i].textContent} added`);
        }

        for (let i = 0;i < mutation.removedNodes.length; i++) {
            console.log(`${mutation.removedNodes[i].textContent} removed`);
        }
    } );
});*/

// Start observing the target node for configured mutations
observer.observe(targetNode, config);
